import { Dropdown, Switch, type MenuProps } from "antd";
import styles from "./Index.module.less";
import FontIcon from "@/components/public/fontIcon/Index";
import SetDrawer from "../setDrawer/Index";
import { useDispatch, useSelector } from "react-redux";
import type { RootState } from "@/store";
import { setDarkTheme } from "@/store/config/index";
import { handleLogout } from "@/store/user";
import { useEffect, useState } from "react";
export default function Index() {
  const userInfo = useSelector((state: RootState) => state.user.userInfo);
  const dispatch = useDispatch();
  const defaultChecked = useSelector((state: RootState) => state.config.darkTheme);
  const handleChangeSwitch = (checked: boolean) => {
    dispatch(setDarkTheme(checked));
  };
  const items: MenuProps["items"] = [
    {
      key: "1",
      label: <span onClick={() => dispatch(handleLogout() as any)}>退出登录</span>,
    },
  ];

  /** 弹窗 */
  const [open, setOpen] = useState(false);

  /** 全屏 */
  const [fullScreen, setFullScreen] = useState(false);
  const handleFullScreenState = () => {
    if (document.fullscreenElement) {
      setFullScreen(true);
    } else {
      setFullScreen(false);
    }
  };
  /** 进入 */
  const enterFullScreen = () => {
    document.querySelector("html")?.requestFullscreen();
  };
  /** 退出 */
  const exitFullscreen = () => {
    document.exitFullscreen();
  };
  useEffect(() => {
    dispatch(setDarkTheme(defaultChecked));
    document.addEventListener("fullscreenchange", handleFullScreenState);
    return () => {
      document.removeEventListener("fullscreenchange", handleFullScreenState);
    };
  }, []);
  return (
    <div className={styles.list}>
      <div className={styles.item}>
        <FontIcon name="icon-settings" title="设置" onClick={() => setOpen(true)} />
      </div>
      <div className={styles.item}>
        <Switch
          size="small"
          checkedChildren={<FontIcon name="icon-moon" />}
          unCheckedChildren={<FontIcon name="icon-sun" />}
          defaultChecked={defaultChecked}
          onChange={handleChangeSwitch}
          title="白色模式/暗黑模式"
        />
      </div>
      <div className={styles.item}>
        {fullScreen ? (
          <FontIcon name="icon-small-screen" onClick={exitFullscreen} title="退出全屏" />
        ) : (
          <FontIcon name="icon-full-screen" onClick={enterFullScreen} title="进入全屏" />
        )}
      </div>
      <div className={styles.item}>
        <FontIcon name="icon-bell" title="通知公告" />
      </div>
      <div className={styles.item}>
        <Dropdown menu={{ items }}>
          <div>
            <span>{userInfo?.nickName}</span>
            <FontIcon name="icon-drill-down" />
          </div>
        </Dropdown>
      </div>

      <SetDrawer open={open} setOpen={setOpen} />
    </div>
  );
}
